<template>
  <div id='TerrainContainer'></div>
</template>

<script>
import flightData from './data'
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addCesiumTimeInterval(this.viewer)
  },
  methods: {
    initCesium() {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZGViNmIwOS0zOWY3LTQ0ZTYtYjg5Yi1jNDEyYzAzZmY1ZmUiLCJpZCI6MTE2OTA2LCJpYXQiOjE2Njk5NjE5NTB9.nN-KM-HnA5STxtweph2Rly5Y9O7bqX1khZKYQlcevHw';


      this.viewer = new Cesium.Viewer('TerrainContainer', {
        animation: true,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: true,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: true,
        selectionIndicator: false,//是否显示选取指示器组件
        shouldAnimate: true,     //自动播放动画控件
        shadows: true,//是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D,
        terrainProvider: new Cesium.CesiumTerrainProvider({//地质开挖必须是cesium提供的地形
          url: Cesium.IonResource.fromAssetId(1),
          requestVertexNormals: true,//顶点法线效果
          requestWaterMask: true//水效果
        })
      })
      //地质开挖不能有深度测试，有深度测试会被遮盖
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addCesiumTimeInterval(viewer) {
/*    // 根据时间来操作的 创建时间的操作 然后
      const timeStepInSeconds = 30 // 初始化时间间隔
      const totalSeconds = timeStepInSeconds * (flightData.length - 1)
      // const start = Cesium.JulianDate.fromIso8601("2022-12-01T23:10:00Z")
      const start = Cesium.JulianDate.fromIso8601("2020-03-09T23:10:00Z");

      const stop = Cesium.JulianDate.addSeconds(start,totalSeconds,new Cesium.JulianDate())
      viewer.clock.startTime = start.clone()
      viewer.clock.stopTime = start.clone()
      viewer.clock.currentTime = start.clone()
    //  时间线
      viewer.timeline.zoomTo(start,stop)
      // Speed up the playback speed 50x.
      viewer.clock.multiplier = 50;
      // Start playing the scene.
      viewer.clock.shouldAnimate = true;
      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
      // The SampledPositionedProperty stores the position and timestamp for each sample along the radar sample series.
      //采样定位属性存储雷达样本系列中每个样本的位置和时间戳。
      const positionProperty = new Cesium.SampledPositionProperty();*/
      const timeStepInSeconds = 30;
      const totalSeconds = timeStepInSeconds * (flightData.length - 1);
      const start = Cesium.JulianDate.fromIso8601("2020-03-09T23:10:00Z");
      const stop = Cesium.JulianDate.addSeconds(start, totalSeconds, new Cesium.JulianDate());
      viewer.clock.startTime = start.clone();
      viewer.clock.stopTime = stop.clone();
      viewer.clock.currentTime = start.clone();
      viewer.timeline.zoomTo(start, stop);
      // Speed up the playback speed 50x.
      viewer.clock.multiplier = 50;
      // Start playing the scene.
      viewer.clock.shouldAnimate = true;
      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
      // The SampledPositionedProperty stores the position and timestamp for each sample along the radar sample series.
      const positionProperty = new Cesium.SampledPositionProperty();
    //  来设计每个样本
      for(let i = 0 ; i < flightData.length - 1 ;i++){
        const dataPoint = flightData[i]
      //  声明此单个样本的时间 并将其存储在新的JolianDate的实例中
        const time = Cesium.JulianDate.addSeconds(start , i * timeStepInSeconds , new Cesium.JulianDate())
        const position = Cesium.Cartesian3.fromDegrees(dataPoint.longitude,dataPoint.latitude,dataPoint.height)
        // Store the position along with its timestamp. 存储位置及其时间戳。
        // Here we add the positions all upfront, but these can be added at run 在这里，我们将所有职位都提前添加，但这些职位可以在运行时添加
        positionProperty.addSample(time,position)
        viewer.entities.add({
          description:`Location : (${dataPoint.longitude}, ${dataPoint.latitude} , ${dataPoint.height})`,
          position,
          point:{
            pixelSize:30,
            color:Cesium.Color.PINK
          }
        })
      }
    //  上面是对点的处理 但是那个线哪里来的

      // STEP 6 CODE (airplane entity) 步骤6 飞机实体
    //  Load the glTF model from Cesium ion.
      const airplaneEntity = viewer.entities.add({
        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({start,stop})]),
        position: positionProperty,
        // Attach the 3D model instead of the green point.
        model: {uri: "http://localhost:8888/model/SampleData/models/CesiumAir/Cesium_Air.glb"},
        // Automatically compute the orientation from the position. 根据位置自动计算方向。
        orientation: new Cesium.VelocityOrientationProperty(positionProperty),// 方向
        path: new Cesium.PathGraphics({width: 30})
      })
      viewer.trackedEntity = airplaneEntity;
    }
  }
}
</script>
<style scoped>
#TerrainContainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
